<template>
	<view class="wrap">
		<!-- list start -->
		<view class="menu-card" v-for="(item, i) in orderList" :key="i">
			<view class="menu-card-date">{{ item.date }}-{{ item.name }}</view>
			<view class="line"></view>
			<view v-for="(food,index) in item.foods" :key="index" class="u-flex food-list">
				<view>
					<image class="food-image" :src="food.icon" mode="aspectFill"></image>
				</view>
				<view class="food-text">

					<view class="u-flex food-text-top">
						<text class="food-text-top-name">{{food.name}}</text>
						<view class="food-text-top-price">
							<text class="font-20">￥</text>
							{{food.price}}
						</view>

					</view>
					<view class="food-text-desc">
						{{food.desc}}
					</view>
					<view class="food-text-num">
						x{{food.value}}
					</view>
				</view>
			</view>
		</view>
		<!-- list end -->

		<!-- button start -->
		<view class="u-bottom">
			<view class="u-bottom__wrap">
				<view class="u-bottom__price">
					<text class="font-24">￥</text>
					{{orderPrice.toFixed(2)}}
				</view>
				<view class="u-bottom__nums">共 {{orderNum}} 件商品</view>
			</view>
			<view class="u-bottom__place" @click="confirmPay">
				确认支付
			</view>
		</view>
		<!-- button end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// orderlist
				orderList: [],
				// orderTotalPrice
				orderPrice: 0,
				// orderNum
				orderNum: 0,
			}
		},
		onLoad(param) {

			// obtainStorageMenu
			uni.getStorage({
				key: 'dishData',
				success: (res) => {
					this.orderList = res.data.order;
					this.orderNum = res.data.menuNum;
					this.orderPrice = res.data.menuPrice;
				}
			});
		},
		methods: {
			// confirmPay
			confirmPay() {
				uni.redirectTo({
					url: '/pages/subPack/index/indexPaysuccess'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 20rpx 20rpx 120rpx 20rpx;

		.menu-card {
			background-color: $uni-bg-color;
			border-radius: 14rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 2px 0px 8px 0px rgba(243, 244, 246, 0.95);

			&:last-child {
				margin-bottom: 0;
			}

			&-date {
				font-weight: bold;
				color: #606266;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			// 分割线
			.line {
				width: 100%;
				border-bottom: 1px solid #ff0000;
			}
		}

		// 菜单列表
		.food-list {
			padding: 20rpx 0 5rpx 0;

			.food-image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
			}

			.food-text {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				width: 100%;

				&-desc {
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					color: #909399;
					font-size: 20rpx;
					margin: 10rpx 0;
				}

				&-top {
					justify-content: space-between;

					&-name {
						font-size: 26rpx;
					}

					&-price {
						color: #EE2F37;
						font-weight: bold;
						font-size: 26rpx;

						.font-20 {
							font-size: 20rpx;
						}
					}
				}

				&-num {
					font-size: 22rpx;
				}
			}
		}

		// 底部
		.u-bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
			right: 0;
			display: flex;
			z-index: 99;
			max-height: 120rpx;

			&__price {
				font-weight: bold;
				margin-left: 20rpx;
				font-size: 40rpx;

				.font-24 {
					font-size: 24rpx;
				}
			}

			&__nums {
				border-left: 1px solid #606266;
				font-size: 24rpx;
				margin-left: 20rpx;
				padding-left: 20rpx;
				font-weight: bold;
			}

			&__wrap,
			&__place {
				display: flex;
				color: #fff;
			}

			&__wrap {
				width: 70%;
				padding: 30rpx 0 30rpx 30rpx;
				align-items: center;
				color: #303133;
				border-top: 1px solid #f3f4f6;
				background-color: white;
			}

			&__place {
				background-color: #EE2F37;
				width: 30%;
				text-align: center;
				flex-direction: column;
				justify-content: center;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
</style>